import { connect } from 'umi';
import { Select,Card,Col, Row,Descriptions, Empty,Divider,Button,message,Tabs } from 'antd';
import React, { useEffect,useState,useRef, useMemo } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import SignTable from './signTable'
import ProTable from '@ant-design/pro-table';
import styles from './style.less';

import {HasPermission} from '@/components/AuthComponent/HasPermission';
const AuthButton = HasPermission(Button);
const AuthDivider = HasPermission(Divider);
const { TabPane } = Tabs;
const Sign = props => {
  const { dispatch,membersList,member,courseList} = props;
  const [activeKey, setActiveKey] = React.useState("1");

  useEffect(() => {
    if (dispatch) {
          dispatch({
            type: 'cubeSignIn/common',
            payload: {
              member:null
            },
          });
          dispatch({
            type: 'cubeSignIn/getCourseBaseInfo',
            payload: {
              courseName:""
            },
          });
     }
   }, []);
 //会员查询
 const handleSearch = (value) =>{
  if(value){
    let timeout;
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
    function fake() {
      dispatch({
        type: 'cubeSignIn/fetchMembersList',
        payload: {
          text:value
        },
      })
    }
    timeout = setTimeout(fake, 500);
  }else{
    dispatch({
      type: 'cubeSignIn/common',
      payload: {
        membersList:[]
      },
    });
  }
}

//选择会员
const handleSelect = value =>{
    //检索会员基本信息
    let member = membersList.filter((item) => {
      return item.id == value;
    });
    if(!!member&&member.length>0){
      dispatch({
        type: 'cubeSignIn/common',
        payload: {
          member:member[0]
        },
      });
    }else{
      dispatch({
        type: 'cubeSignIn/common',
        payload: {
          member:null
        },
      });
    }
}

  /**
   * tab切换
   * @param {*} key 
   */
  const onTabChange = (key) =>{
    setActiveKey(key)
  }
  const options = membersList.map(d => <Option key={d.id}>{d.name}({d.phone})</Option>);

  const SignTableMemo1 = useMemo(()=>{
    console.log('member>>>>',member)
    return <SignTable activeKey={1} memberId={member?.id} signStatus={activeKey} courseList={courseList}/>
  },[member?.id,activeKey,courseList])
  const SignTableMemo2 = useMemo(()=>{
    console.log('member1>>>>',member)
    return <SignTable activeKey={2} memberId={member?.id} signStatus={activeKey} courseList={courseList}/>
  },[member?.id,activeKey,courseList])
  return (
    <GridContent>
     <Card>
       <Row>
        <Col span={8}></Col>
        <Col span={8}>
        <span>会员：</span>
          <Select
                    showSearch
                    placeholder="请输入会员姓名或者手机号码"
                    showArrow={false}
                    filterOption={false}
                    onSearch={handleSearch}
                    onSelect={handleSelect}
                    notFoundContent={null}
                    style={{width:400}}
                  >
                    {options}
          </Select>
        </Col>
        <Col span={8}></Col>
       </Row>
     </Card>
     <Card
              title="会员信息"
              style={{
                marginTop: 24,
              }}
              bordered={false}
            >
              {
                !!member?<Descriptions
                style={{
                  marginBottom: 24,
                }}
              >
                <Descriptions.Item label="头像">{member?member.headPortrait?<img src={member.headPortrait} style={{with:20,height:20,borderRadius:'50%'}}/>:"未设置":''}</Descriptions.Item>
                <Descriptions.Item label="名称">{member?member.name:'未设置'}</Descriptions.Item>
                <Descriptions.Item label="别名">{member?member.nickName:'未设置'}</Descriptions.Item>
                <Descriptions.Item label="手机号">{member?member.phone:'未设置'}</Descriptions.Item>
                <Descriptions.Item label="性别">{member?member.sex=='1'?'男':member.sex=='2'?'女':'未设置':''}</Descriptions.Item>
                <Descriptions.Item label="工作地址">{member?member.workAddress:'未设置'}</Descriptions.Item>
                <Descriptions.Item label="销售">{member?member.salesName:'未设置'}</Descriptions.Item>
                <Descriptions.Item label="教练">{member?member.coachName:'未设置'}</Descriptions.Item>
                <Descriptions.Item label="备注">{member?member.bz:'未设置'}</Descriptions.Item>
              </Descriptions>:<Empty/>
              }
      </Card>
     <Card title="签到记录" style={{marginTop: 24}}  bordered={false}>
      <div className={styles.proTable}>
      <Tabs activeKey={activeKey} onChange={onTabChange} tabPosition="left">
        <TabPane tab="未签到记录" key="1">
            {SignTableMemo1}
        </TabPane>
        <TabPane tab="已签到记录" key="2">
            {SignTableMemo2}
        </TabPane>
      </Tabs>
      </div>
     </Card>
    </GridContent>
  );
};

export default connect(({ loading, cubeSignIn }) => ({
  membersList:cubeSignIn.membersList,
  member:cubeSignIn.member,
  classInfoList:cubeSignIn.classInfoList,
  courseList:cubeSignIn.courseList
}))(Sign);
